<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue.jss</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <div id="app">
        <div style="height: 200px"></div>
        <div class="note">
            <transition-group name="list" tag="ul">
                <li v-for="item in list" :key="item">
                    <div class="ti">{{item.title}}<i>{{item.time}}</i></div>
                    <div class="con">{{item.content}}</div>
                </li>
            </transition-group>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script type="text/javascript">
    "use strict";var list=[{title:"3、腾讯视频",time:"06.47",content:"83岁老人街边遭陌生男子殴打 满脸是血全身多处骨折"},{title:"4、京东",time:"03.41",content:"全球好物，11.5超级狂欢；京东超级品牌日"},{title:"5、抖音短视频",time:"02.12",content:"抖音上的八大网红,有五个你认识的,就说明你是抖音的资深玩家"}],listnew=[{title:"1、腾讯新闻",time:"10.25",content:"老挝湖南商会会长家中遇袭身亡：2名涉案主要嫌疑人被押解回国"},{title:"2、今日头条",time:"08.53",content:"台湾大学生提问“广州有没有地铁”被讽井底之蛙，台网友：民进党害惨台湾"}];new Vue({el:"#app",data:{list:list},mounted:function(){var t,e;setInterval(function(){e=listnew.pop(),list.unshift(e),setTimeout(function(){t=list.pop(),listnew.unshift(t)},10)},4e3)}});
    </script>
    <style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
        box-sizing: border-box;
    }

    body {
        background: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=4019579803,254055481&fm=173&app=25&f=JPEG?w=640&h=1386&s=7797D2AEBCD800D4509B8EAD0300601D) 0 0 no-repeat;
        background-size: cover;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    }

    #app {
        padding: 20px;
    }
    .note ul{position: relative;}
    .note ul li{font-size: 14px;
        background: rgba(255,255,255,.9);
        border-radius: 6px;
        margin-bottom: 10px;
        transition: all .3s;
    }
    .note ul li .ti{
        background: rgba(255,255,255,.9);padding:5px 10px;border-radius: 6px 6px 0 0;color: #999
    }
    .note ul li .ti i{float: right;color: #999}
    .note ul li .con{line-height: 22px;padding:10px;}


    .list-enter{
        opacity: 0;
        transform: scale(.2);
    }
    .list-enter-to{
        opacity: 1;
        transform: scale(1);
    }
    .list-leave {
        opacity: 1;

    }
    .list-leave-to {
        opacity: 0;

        /*transform: translateY(30px);*/
    }

    </style>
</body>

</html>
